<template>
    <div class="qilin-user">
        <h1>个人信息</h1>
        <img src="@/assets/images/image01.jpg" alt="">
        <div class="qilin-user-info">
            <div class="qilin-user-info-item">
                <div class="qilin-user-info-item-label">姓名</div>
                <div class="qilin-user-info-item-value">桃桃桃桃桃</div>
            </div>
            <div class="qilin-user-info-item">
                <div class="qilin-user-info-item-label">年龄</div>
                <div class="qilin-user-info-item-value">18</div>
            </div>
            <div class="qilin-user-info-item">
                <div class="qilin-user-info-item-label">邮箱</div>
                <div class="qilin-user-info-item-value">123456@qq.com</div>
            </div>
            <div class="qilin-user-info-item">
                <div class="qilin-user-info-item-label">手机号</div>
                <div class="qilin-user-info-item-value">15555599999</div>
            </div>
            <div class="qilin-user-info-item">
                <div class="qilin-user-info-item-label">居住地址</div>
                <div class="qilin-user-info-item-value">湖南省武汉市</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    methods:{

    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.qilin-user{
    width:100%;
    height:100%;
    text-align:center;
    padding:100px 20px;
    background-color:#fff;
    border-radius:$radius-default;
    >h1{
        font-size:32px;
        padding:20px;
    }
    >img{
        width:50px;
        height:50px;
        border-radius:$radius-circle;
        margin:0 20px 20px;
    }
    >.qilin-user-info{
        width:50%;
        margin:20px auto;
        >.qilin-user-info-item{
            display:flex;
            flex-flow:row nowrap;
            align-items:center;
            padding:10px 5px;
            border-bottom:1px solid $border-color;
            >.qilin-user-info-item-label{
                flex:1;
                text-align:left;
                color:$normal-text-color;
                font-size:$medium-text-size;
            }
            >.qilin-user-info-itme-value{
                text-align:right;
            }
        }
    }
}
</style>
